<template>
    <div class="app-container">
        <el-divider content-position="left">编辑试题</el-divider>
        <el-form :model="form" ref="form" :rules="rules" label-width="110px">
            <el-form-item label="试题类型" prop="questionsType">
                <el-radio v-model="form.questionsType" label="1" border @input="qusetionSelected">单选题</el-radio>
                <el-radio v-model="form.questionsType" label="2" border @input="qusetionSelected">多选题</el-radio>
                <el-radio v-model="form.questionsType" label="3" border @input="qusetionSelected">判断题</el-radio>
                <el-radio v-model="form.questionsType" label="4" border @input="qusetionSelected">填空题</el-radio>
                <el-radio v-model="form.questionsType" label="5" border @input="qusetionSelected">问答题</el-radio>
                <!-- <el-select v-model="form.questionsType" clearable filterable size="small" style="width: 70%" @change="qusetionSelected">
                    <el-option value="1" label="单选题"></el-option>
                    <el-option value="2" label="多选题"></el-option>
                    <el-option value="3" label="判断题"></el-option>
                    <el-option value="4" label="填空题"></el-option>
                    <el-option value="5" label="问答题"></el-option>
                </el-select> -->
            </el-form-item>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="试题适用专业" prop="major">
                        <el-select v-model="form.major" clearable filterable style="width:70%">
                            <el-option v-for="item in majorList" :label="item.subjectName+''" placeholder="班级专业"
                                :value="item.id+''" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="试题适用科目" prop="subjects">
                        <el-select v-model="form.subjects" clearable filterable size="small" style="width: 70%">
                            <el-option v-for="dict in subjectList" :key="dict.id" :label="dict.subjName" :value="dict.id+''" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="试题适用年级" prop="grade">
                        <el-select v-model="form.grade" clearable filterable style="width:70%">
                            <el-option v-for="dict in classGradeList" placeholder="班级年级"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue+''" ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
              <el-col :span="8">
                <el-form-item label="试题公有度" prop="invisible">
                  <el-select v-model="form.invisible" clearable filterable style="width:70%" placeholder="公/私有">
                    <el-option label="公有" value="1" ></el-option>
                    <el-option label="私有" value="0" ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
        <el-divider content-position="left">题目部分</el-divider>
            <el-form-item label="题目" prop="questionsName">
                <el-input type="textarea" :rows="2" v-model="form.questionsName" :placeholder="form.placeholder" style="width: 90%" @change="fillContentInput"></el-input>
            </el-form-item>
            <el-form-item label="答案选项" v-if="form.questionsType=='1' || form.questionsType=='2'">
                <div v-for="item in form.optionList" :key="item.optIdx">
                    <el-row>
                        <el-col :span="2">
                            <el-tag>{{ item.optIdx }}</el-tag>
                        </el-col>
                        <el-col :span="20">
                            <editor :refName="'quillEditor'+item.optIdx" :value="item.optTxt" @input="updateContext" :itemData="item" :options="toolbarOptions" style="width:90%"></editor>
                            <!-- <quillEditor :value="item.optTxt"></quillEditor> -->
                        </el-col>
                        <el-col :span="2">

                        </el-col>
                    </el-row>
                </div>
            </el-form-item>
            <el-form-item label="正确答案" v-if="form.questionsType=='1'">
                <el-radio  v-for="item in form.unitList" v-model="form.unit" :key="item.optIdx" :label="item.optIdx">{{ item.optIdx }}</el-radio>
            </el-form-item>
            <el-form-item label="正确答案" v-if="form.questionsType=='2'">
              <el-checkbox  v-for="item in form.unitList" v-model="item.isRight" :key="item.optIdx" >{{ item.optIdx }}</el-checkbox>
            </el-form-item>
            <el-form-item label="正确答案" v-if="form.questionsType=='3'">
                <el-radio  v-for="item in form.unitList" v-model="form.unit" :key="item.optIdx" :label="item.optIdx">{{ item.optTxt }}</el-radio>
            </el-form-item>
            <el-form-item label="正确答案" v-if="form.questionsType=='4'">
                <el-input style="width:150px;margin-right: 5px;" clearable v-for="item in form.unitList" :key="item.optIdx" v-model="item.optTxt"></el-input>
            </el-form-item>
            <el-form-item label="正确答案" v-if="form.questionsType=='5'">
                <el-input type="textarea" :rows="3" placeholder="请输入问答题答案" v-model="form.unit"> </el-input>
            </el-form-item>
            <el-form-item label="解析">
                <el-input type="textarea" :rows="3" placeholder="请输入解析内容" v-model="form.analysis"> </el-input>
            </el-form-item>
            <el-form-item label="题目分数" prop="sore">
                <el-input-number v-model="form.sore"  :min="1" :max="100" label="描述文字"></el-input-number>
            </el-form-item>
        </el-form>
        <div style="text-align: center;">
            <el-button type="primary" @click="onSubmit">提 交</el-button>
            <el-button @click="cancel">返 回</el-button>
        </div>
    </div>
</template>

<script>
import { findBaseSubjectPageList} from "@/api/baseData/profession";
import {subjectList} from "@/api/educational/subject.js";
import { addQuestions,updateQuestions,getQuestionsDetails} from "@/api/studentInfo/questions";
import  editor  from '@/components/Editor/index'
// import  quillEditor  from '@/components/quillEditor/index'

  export default {
    name: "editQusetions",
    components: {editor},
    data() {
      return {
        checkList:[
            {optIdx:"A",isRight:false},
            {optIdx:"B",isRight:false},
            {optIdx:"C",isRight:false},
            {optIdx:"D",isRight:false},
        ],
        submitLoading:false,
        majorList:[],//专业
        subjectList:[],//科目
        classGradeList:[],
        form:{
            questionsName:null,
            major:null,
            options:[],
            optionList:[],
            unitList:null,
            unit:null,
            isRight:null
        },
        rules: {
            questionsType: [
                { required: true, message: "请选择试题类型", trigger: "change" }
            ],
            major: [
                { required: true, message: "请选择试题适用专业", trigger: "change" }
            ],
            subjects: [
                { required: true, message: "请选择试题适用科目", trigger: "change" }
            ],
            grade:[
                { required: true, message: "请选择试题适用年级", trigger: "change" }
            ],
            invisible:[
                { required: true, message: "请选择试题公有度", trigger: "change" }
            ],
            questionsName:[
                { required: true, message: "题目不能为空", trigger: "change" }
            ],
            sore:[
                { required: true, message: "请选择题目分数", trigger: "change" }
            ]
        },
        id:null,
        toolbarOptions : [
                ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
                ["blockquote", "code-block"],                    // 引用  代码块
                ["clean"],                                       // 清除文本格式
                ["link", "image", "video"],                       // 链接、图片、视频
                ['formula']  //公式
                ]
      };
    },
    created() {
        this.id = this.$route.query.id
        const that = this;
        if(this.id){
            getQuestionsDetails(this.id).then(resp=>{
                if(!resp.data){
                    that.$message({ message: '没有查询到您要的试题', type: 'warning' });
                    return
                }

                that.form = resp.data

                if(that.form.questionsType==1 ){
                    that.form.optionList = JSON.parse(resp.data.options)
                    that.form.unitList=[
                        {optIdx:"A",isRight:false},
                        {optIdx:"B",isRight:false},
                        {optIdx:"C",isRight:false},
                        {optIdx:"D",isRight:false},
                    ]
                }
                if(that.form.questionsType==2){
                    // that.form.optionList = JSON.parse(resp.data.options)
                    that.$set(that.form,'optionList',JSON.parse(resp.data.options))
                    that.$set(that.form,'unitList',JSON.parse(resp.data.unit))
                }
                if(that.form.questionsType==3){
                    that.form.unitList=[
                        {optIdx:"yes", optTxt:"对", isRight:false},
                        {optIdx:"wrong", optTxt:"错", isRight:false},
                    ]
                }
                if(that.form.questionsType==4){
                    that.$set(that.form,'unitList',JSON.parse(resp.data.unit))
                }
                if(that.form.questionsType==5){
                    that.$set(that.form,'unit',JSON.parse(resp.data.unit))
                    // that.form.unit=JSON.parse(resp.data.unit)
                }
                console.log(that.form)
            })
        }
        this.getMajorList()
        this.getSubjectList()
        this.getDicts("class_grade").then(response => {
            this.classGradeList = response.data;
        });
    },
    methods: {
        updateContext(val,item){
            console.log(val,item)
            item.optTxt = val
        },
        fillContentInput(){
            if(this.form.questionsType==4){
                //填空内容输入
                let titlsFlags = this.form.questionsName.match(/{}/g)
                if(titlsFlags){
                    let answers=[]
                    console.log(titlsFlags.length)
                    for(let i=1;i<=titlsFlags.length;i++){
                        answers.push({
                            optIdx:i, optTxt:"第"+i+"个空位答案"
                        })
                    }
                    console.log(answers)
                    this.form.unitList=answers

                }else{
                    this.form.unitList=[]
                }
                console.log(this.form)
            }

        },
        qusetionSelected(){

            //选择题型
            if(this.form.questionsType=='1'){
                //单选
                this.singleChoiceHandle('1')
            }
            if(this.form.questionsType=='2'){
                //多选
                this.singleChoiceHandle('2')
            }
            if(this.form.questionsType=='3'){
                //判断
                this.judgeHandle()
            }
            if(this.form.questionsType=='4'){
                //填空题
                this.fillHandle()
            }
            if(this.form.questionsType=='5'){
                this.qAndaHandle()
            }
            console.log(this.form)
        },
        qAndaHandle(){
            //问答题
            this.form.questionsName=null,
            this.form.unitList="",
            this.form.isRight=null

        },
        fillHandle(){
            //填空题
            this.form.placeholder= '填空题的空位请用 "{}" 代提，如：13 + {} = 56',
            this.form.questionsNameL=null,
            this.form.unitList=[],
            this.form.isRight=null


        },
        judgeHandle(){
            //判断题
            this.form.questionsName=null
            this.form.unitList=[
                    {optIdx:"yes", optTxt:"对", isRight:false},
                    {optIdx:"wrong", optTxt:"错", isRight:false},
                ]
            this.form.isRight=null
            console.log(this.form)
        },
        resetForm(type){
            this.form={
                    questionsName:null,
                    major:this.form.major,
                    subjects:this.form.subjects,
                    grade:this.form.grade,
                    options:[],
                    optionList:[
                        {optTxt:"第一题",optIdx:"A"},
                        {optTxt:"第二题",optIdx:"B"},
                        {optTxt:"第三题",optIdx:"C"},
                        {optTxt:"第四题",optIdx:"D"}
                    ],
                    unitList:[
                        {optIdx:"A",isRight:false},
                        {optIdx:"B",isRight:false},
                        {optIdx:"C",isRight:false},
                        {optIdx:"D",isRight:false}
                    ],
                    unit:null,
                    isRight:null,
                    questionsType:type
            }
        },
        singleChoiceHandle(type){
            //选择单选题
            this.form.questionsName=null
            this.resetForm(type)

            console.log(this.form.unitList)
            // this.$forceUpdate()
        },
        cancel() {
        // this.$router.push("/educational/exam/questions")
        this.$router.go(-1)
      },
        onSubmit(){
            this.submitLoading = true
            console.log(this.form)
            if(this.form.questionsType==1 || this.form.questionsType==2){
                this.form.options = JSON.stringify(this.form.optionList)
            }
            if(this.form.questionsType==2){
                this.form.unit = JSON.stringify(this.form.unitList)
                if(this.xian == 2){
                    this.form.unit = JSON.stringify(this.checkList)
                }
            }
            if(this.form.questionsType!=1 && this.form.questionsType!=2){
                //处理选择题，其他题目都没有选项
                this.form.options = null
            }
            if(this.form.questionsType==4 || this.form.questionsType==5){
                this.form.unit= JSON.stringify(this.form.unitList)
            }
            const _this = this
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if(this.id){
                      updateQuestions(this.form).then(resp => {
                        this.submitLoading = false
                        _this.msgSuccess("更新成功");
                        // _this.$router.push("/educational/exam/questions")
                        this.$router.go(-1)
                      });
                    }else{
                        addQuestions(this.form).then(resp=>{
                            this.submitLoading = false
                            this.$confirm('提交成功，是否停留在该页面', "警告", {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "success"
                            }).then(() => {
                                _this.form.questionsType
                                _this.qusetionSelected()
                            }).catch(function() {
                              this.dialogVisible = false;
                            });
                        })
                    }

                }else{
                    this.submitLoading = false
                }

            })
        },
        getMajorList(){
            //查询专业
            findBaseSubjectPageList({pageSize:100,pageNum:1,status:1}).then(response =>{
                this.majorList = response.data.list
            })
        },
        getSubjectList(){
            //查询专柜
            subjectList({pageSize:100,pageNum:1,status:1}).then(response =>{
                this.subjectList = response.data.list
            })
        },
     },

  };
  </script>
